import { Col, Row, Spin, Collapse, Empty } from 'antd';
import React, { useContext, useCallback, useState, useEffect } from 'react';
import '../common/styles.less';
import ScrollBarLayout from '@/components/ScrollBarLayout';
import pageStyles from '@/common/pageLayout.less';
import { VersionManageContext } from '../common/useManageContext';
import { CaretRightOutlined } from '@ant-design/icons';
import MyIcon from '@/components/MyIcon';
import _ from 'lodash';
import { VersionViewAPI } from '../common/type';

const VersionCollapse: React.FC<VersionViewAPI.IVersionCollapse> = ({ versionList }) => {
  const { prefixCls, loading } = useContext(VersionManageContext);

  /**
   * 保存监听的滚动条高度
   */
  const [scrollHeight, setScrollHeight] = useState<number>(0);
  const scrollHeightCallback = useCallback(
    (height: number) => {
      setScrollHeight(height);
    },
    [scrollHeight],
  );

  /**
   * 监听 公告内容滚动
   * @param event
   */
  const monitorScrolling = (event: any) => {
    let { target } = event;
    if (target.scrollTop > document.body?.clientHeight * 0.3) {
      scrollHeightCallback(target?.scrollTop);
    }

    if (target?.scrollTop < document.body?.clientHeight * 0.3) {
      if (scrollHeight != 0) {
        scrollHeightCallback(0);
        // setHoverBackTop(false);
      }
    }
  };

  /**
   * 处理版本状态颜色
   * @param versionState 传入的当前版本状态
   * @returns
   */
  const versionStateColor = (state: any) => {
    let versionStateColor: any = '';
    let versionState: any = '';
    if (state == 1) {
      versionState = '发布上线';
      versionStateColor = 'red';
    }
    if (state == 2) {
      versionState = '历史版本';
      versionStateColor = '#868686';
    }
    return {
      versionState,
      versionStateColor,
    };
  };

  /**折叠Title  根据title开关显示不同的MyIcon*/
  const headerTitleIcon = (item: any) => {
    return (
      <>
        {item?.isPublic == 1 ? (
          <MyIcon
            type="icon-zxjiaobiao"
            isTheme={false}
            style={{
              color: versionStateColor(item?.isPublic)?.versionStateColor,
            }}
          />
        ) : (
          <>
            <span className="picon"></span>
            <span className="pimg">OLD</span>
          </>
        )}
        &nbsp;&nbsp;
        {item?.publicNum && (
          <span
            className="one-icon"
            style={{
              color: versionStateColor(item?.isPublic)?.versionStateColor,
              fontSize: '17px',
            }}
          >
            {item?.publicNum}
          </span>
        )}
        &nbsp;&nbsp;
        {item?.isPublic && (
          <span
            style={{
              color: versionStateColor(item?.isPublic)?.versionStateColor,
              fontSize: '16px',
            }}
          >
            {versionStateColor(item?.isPublic)?.versionState}
          </span>
        )}
      </>
    );
  };

  /**
   * 面板展开关闭
   */
  const [collapePaneKey, setCollapePaneKey] = useState<string[]>([]);

  useEffect(() => {
    if (versionList && versionList?.length > 0) {
      setCollapePaneKey(versionList?.[0]?.id);
    }
  }, [versionList]);

  /**
   * @param selKey  改变面板的key
   */
  const handleChangeColl = (selKey: any) => {
    setCollapePaneKey(selKey);
  };

  return (
    <>
      <Spin spinning={loading}>
        <ScrollBarLayout>
          {versionList && versionList.length > 0 ? (
            <>
              <Collapse
                accordion //手风琴，每次只打开一个 tab。
                onChange={handleChangeColl}
                activeKey={collapePaneKey}
                expandIcon={({ isActive }) => <CaretRightOutlined rotate={isActive ? 90 : 0} />}
              >
                {versionList?.map((item: any, index: number) => {
                  return (
                    <Collapse.Panel
                      header={headerTitleIcon(item)}
                      key={item.id}
                      showArrow={false}
                      className={prefixCls + 'versionCollapse'}
                    >
                      <Row className={'cardBodyRow'}>
                        <Col span={24} className={'cardBodyCol'}>
                          <div className={prefixCls + 'versionInformation'}>
                            <Row
                              style={{
                                padding: '0px 10px',
                                marginRight: 0,
                                marginLeft: 0,
                              }}
                              gutter={[10, 10]}
                            >
                              <Col span={20}>
                                <div className={prefixCls + 'versionInformation-content'}>
                                  尊敬的
                                  <span style={{ color: '#000000' }}>【北京云奇汇智科技有限公司】</span>
                                  用户，您好！
                                  <br />
                                  为给您带来更好的系统使用体验，我司已发布新的版本。
                                </div>
                              </Col>
                            </Row>
                            {/* <Divider /> */}
                            <div
                              style={{
                                height: document.body.clientHeight * 0.3,
                              }}
                              className={prefixCls + 'versionInformation-scrollBox'}
                            >
                              <ScrollBarLayout
                                style={{
                                  padding: '5px 15px',
                                  display: 'flex',
                                  flexDirection: 'column',
                                  justifyContent: 'space-between',
                                }}
                                onScroll={monitorScrolling}
                              >
                                <Row id={'announceViewScroll'} style={{ height: 'auto' }}>
                                  <Col span={24}>
                                    <div className={prefixCls + 'versionInformation-content'}>本次更新内容如下：</div>
                                    <div
                                      style={{
                                        // color: '#989898',
                                        color: '#000000',
                                        fontSize: '20px',
                                        // paddingLeft: '50px',
                                      }}
                                      dangerouslySetInnerHTML={{
                                        __html: item?.upgradeNote?.contentHtml,
                                      }}
                                      className={pageStyles['editorStyle']}
                                    />
                                  </Col>
                                </Row>
                              </ScrollBarLayout>
                            </div>
                            <div className={prefixCls + 'versionInformation-contentUser'}>
                              <div>
                                <>
                                  <div style={{ display: 'flex' }}>
                                    <div
                                      style={{
                                        textAlign: 'right',
                                        width: '6em',
                                      }}
                                    >
                                      发布时间：
                                    </div>
                                    <span style={{ color: '#545454' }}>{(item && item?.signTime) || '--'}</span>
                                  </div>
                                </>
                              </div>
                            </div>
                          </div>
                        </Col>
                      </Row>
                    </Collapse.Panel>
                  );
                })}
              </Collapse>
            </>
          ) : (
            <>
              <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
            </>
          )}
        </ScrollBarLayout>
      </Spin>
    </>
  );
};
export { VersionCollapse };
